<template>
	<view>
		<!-- 使用自定义的搜索组件 -->
		<view class="search-box">
		  <my-search @click="gotoSearch"></my-search>
		</view>
	    <!-- 轮播图区域 -->
	    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
	      <!-- 循环渲染轮播图的 item 项 -->
	      <swiper-item v-for="(item, i) in swiperList" :key="i">
	        <view class="swiper-item">
	         <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
	               <!-- 动态绑定图片的 src 属性 -->
	               <image :src="item.image_src" mode="aspectFill"></image>
	         </navigator>
	        </view>
	      </swiper-item>
	    </swiper>
		<!-- 分类导航项 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
				<image :src="item.image_src" class="nav-img"></image>
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 楼层区域 -->
		<view class="floor-list" v-for="(item, i) in floorList" :key="i">
			<view class="floor-title">
				| {{item.floor_title.name}}
			</view>
			<view class="items">
				<view class="item" v-for="(item1, i) in item.floor_title.product_list" :key="i">
					 <navigator :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item1.goods_id">
						<image :src="item1.image_src" mode=""></image>
						<view class="goods-name">
							{{item1.name}}
						</view>
						<view class="price">
							￥{{item1.price}}
						</view>
					</navigator>
				</view>
			</view>
		</view>
	  </view>
</template>

<script>
	import cloudApi from "@/common/cloundApi.js"
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				//轮播图数据列表
				swiperList:[],
				// 分类导航的数据列表
				navList:[],
				// 楼层的数据列表
				floorList: []
			};
		},
		onLoad() {
			//获取轮播图、分类列表、楼层数据数据
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()
		},
		methods: {
			// 获取轮播图
			async getSwiperList() {
				cloudApi.call({
					name:"swiper",
					data:{
						action:"get" 
					},
					success:(res)=>{
						this.swiperList = res.result;
					}
				})
			},
			// 获取导航栏
			async getNavList() {
				cloudApi.call({
					name:"classify",
					data:{
						action:"get" 
					},
					success:(res)=>{
						this.navList = res.result;
					}
				})
			},
			 navClickHandler(item) {
				if(item.name === "分类"){
					uni.switchTab({
						url:'../cate/cate'
					})
				}else{
					uni.navigateTo({
					  url: '/subpkg/goods_list/goods_list?query='+item.name
					})
				}
			},
			//获取楼层列表数据的方法
			async getFloorList() {
				cloudApi.call({
					name:"swiper",
					data:{
						action:"getFloor" 
					},
					success:(res)=>{
						this.floorList = res.result;
					}
				})
			},
			gotoSearch() {
			  uni.navigateTo({
			    url: '/subpkg/search/search'
			  })
			}
		}
		
	}
</script>

<style lang="scss">
swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
} 
.nav-list {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;

  .nav-img {
    width: 110rpx;
    height: 110rpx;
  }
}
.nav-item{
	view{
		font-size: 12px;
		text-align: center;
		color: rgba($color: #000000, $alpha: 0.88);
	}
}
.search-box {
  // 设置定位效果为“吸顶”
  position: sticky;
  // 吸顶的“位置”
  top: 0;
  // 提高层级，防止被轮播图覆盖
  z-index: 999;
}
.floor-list{
	display: flex;
	flex-wrap: wrap;
	.floor-title{
		width: 100%;
		padding-left: 10px;
		font-weight: bold;
		color: #c00000;
		margin-top: 15px;
	}
	.item{
		padding: 5px;
		border: 1px solid rgba(0,0,0,.2);
		margin-top:10px;
		width: 42%;
		.goods-name{
			font-size: 14px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		.price{
		color: #c00000;
			
		}
		image{
			width: 100%;
			height: 100px;
			}
	}
}
.items{
	display: flex;
    justify-content: space-evenly;
	flex-wrap: wrap;
}
</style>
